<template>
<div style="height:100%">
  <topHeader>
    <div slot="left">
      <img src="./../../assets/img/return.png" alt="" @click="goPrev">
    </div>
    <span slot="center">
      预定详情
    </span>
  </topHeader>
  <div class="order_info">
    <div class="order_li">
      <div class="order_li_l">
        <p>【始发站】：{{ cumInfo.start }} &rarr;{{ cumInfo.end }} </p>
        <p>【电话】{{ cumInfo.phone }}</p>
        <p>【人数】：{{ cumInfo.num }}</p>
        <p>【上车地点】：{{ cumInfo.starts }}</p>
      </div>
      <div class="pay_btn" @click="goTEL">拨打乘客电话</div>
    </div>
  </div>
</div>
</template>

<script>
import { customInfo } from '@/api/allapis'
import topHeader from './../../components/topHeader'
export default {
  data () {
    return {
      id: null,
      userid: null,
      cumInfo: {}
    }
  },

  components: {
    topHeader
  },

  computed: {},

  mounted () {
    this.id = this.$route.query.id
    this.userid = this.$route.query.userid
    this.loadCustomInfo()
  },

  methods: {
    loadCustomInfo () {
      customInfo({ id: this.id, userid: this.userid }).then(res => {
        this.cumInfo = res.data
      })
    },
    goPrev () {
      this.$router.push({ name: 'index' })
    },
    goTEL () {
      console.log(this.cumInfo.phone)
      window.location.href = 'tel:' + this.cumInfo.phone
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./orderinfo.less');
</style>